<template>
	<n-tabs
		v-model:value="tabName"
		type="bar"
		placement="left"
		@update:value="changeTab">
		<n-tab-pane name="base" tab="基本信息">
			<n-descriptions label-placement="left" title="基本信息" :column="1">
				<n-descriptions-item label="班级名称">
					{{gradeInfo.name}}
				</n-descriptions-item>
				<n-descriptions-item label="班级简称">
					{{gradeInfo.subName}}
				</n-descriptions-item>
				<n-descriptions-item label="教室">
					{{gradeInfo.room}}
				</n-descriptions-item>
				<n-descriptions-item label="开班日期">
					{{gradeInfo.startDate}}
				</n-descriptions-item>
				<n-descriptions-item label="结束日期">
					{{gradeInfo.endDate}}
				</n-descriptions-item>
			</n-descriptions>
		</n-tab-pane>
		<n-tab-pane name="student" tab="学生列表">
			<h2>{{gradeInfo.name}}</h2>
			<student-list :grade-id="gradeId" />
		</n-tab-pane>
		<n-tab-pane name="homework" tab="作业管理">
			<Work :grade-id="gradeId"/>
		</n-tab-pane>
	</n-tabs>
</template>

<script setup> 
import StudentList from '@/components/student/list'
import { getInfo } from '@/api/gradeApi'
import Work from '@/components/student/work'
import { useParamsStore } from '@/stores'
const paramsStore = useParamsStore()
const gradeId = paramsStore.params.gradeId
const tabName = ref('base')
const gradeInfo = ref({})
function changeTab(value) {
	paramsStore.setParams({ grade_tab: value })
}
if (process.client) {
	if (paramsStore.params.grade_tab) {
		tabName.value = paramsStore.params.grade_tab
	} else {
		paramsStore.setParams({ grade_tab: tabName.value })
	}
	getInfo(paramsStore.params.gradeId, content => {
		gradeInfo.value = content
	})
}
</script>

<style scoped lang="scss">
.n-tab-pane {
	padding-left: 20px !important;
	h2 {
		line-height: 2rem;
		margin-bottom: 1rem;
	}
}
</style>